<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/default.xhtml">
	<ui:define name="content">
		<h:form id="options">
			<div class="frmOpciones">
				<p:panel id="controles" styleClass="controles2">
					<div class="filaItem"
						style="border-bottom: 1px solid rgb(228, 220, 220);">
						<div class="columnaItem">
							<h:outputLabel value="Periodo" for="idPeriodo"
								styleClass="labelColumna" />
							<p:selectOneMenu id="idPeriodo"
								value="#{proyeccionClientesMBean.periodoDefault}">
								<f:selectItem itemLabel="- Periodo -" itemValue="0" />
								<f:selectItems value="#{proyeccionClientesMBean.listaPeriodos}"
									var="periodo" itemLabel="#{periodo.descripcion}"
									itemValue="#{periodo.id}" />
							</p:selectOneMenu>
						</div>
						<div class="columnaItem">
							<h:outputLabel value="Zona" for="idZona"
								styleClass="labelColumna" />
							<p:selectOneMenu id="idZona"
								value="#{proyeccionClientesMBean.idZona}">
								<p:ajax event="change"
									listener="#{proyeccionClientesMBean.cargarFFVV()}"
									update="idFfvv" />
								<f:selectItem itemLabel="- Todos -" itemValue="0" />
								<f:selectItems value="#{proyeccionClientesMBean.listaZonas}"
									var="zona" itemLabel="#{zona.codigo}" itemValue="#{zona.id}" />
							</p:selectOneMenu>
						</div>
						<div class="columnaItem">
							<h:outputLabel value="Canal" for="idCanal"
								styleClass="labelColumna" />
							<p:selectOneMenu id="idCanal"
								value="#{proyeccionClientesMBean.idCanal}">
								<p:ajax event="change"
									listener="#{proyeccionClientesMBean.cargarFFVV()}"
									update="idFfvv" />
								<f:selectItem itemLabel="- Todos -" itemValue="0" />
								<f:selectItems value="#{proyeccionClientesMBean.listaCanales}"
									var="canal" itemLabel="#{canal.categoria}"
									itemValue="#{canal.id}" />
							</p:selectOneMenu>
						</div>
					</div>
					<div class="filaItem" style="padding-top: 5px;">
						<div class="columnaItem">
							<h:outputLabel value="FFVV" for="idFfvv"
								styleClass="labelColumna" />
							<p:selectOneMenu id="idFfvv"
								value="#{proyeccionClientesMBean.idFfvv}">
								<f:selectItem itemLabel="- Todos -" itemValue="0" />
								<f:selectItems value="#{proyeccionClientesMBean.listaFFVV}"
									var="fv" itemLabel="#{fv.apellido}" itemValue="#{fv.id}" />
							</p:selectOneMenu>
						</div>
						<div class="columnaItem">
							<p:commandButton value="Mostrar"
								styleClass="buttomClienteProyeccion"
								actionListener="#{proyeccionClientesMBean.inicializar()}"
								id="frmMostrar" update=":tabAvance,:tabAvance:tableClientes" />
						</div>
					</div>
				</p:panel>
			</div>
		</h:form>
		<p:tabView id="tabAvance" styleClass="tabAvance">
			<p:tab title="Avance Monto" id="tabGrafico"
				titleStyleClass="titleTab">
				<h:form id="tableClientes">
					<p:dataTable id="idAvances" var="cliente"
						value="#{proyeccionClientesMBean.listaCliente}" paginator="true"
						rows="10" selectionMode="single" selection="#{proyeccionClientesMBean.selectedCliente}" rowKey="#{cliente.id}"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						rowsPerPageTemplate="5,10,15" sortMode="multiple"
						emptyMessage="No se Econtro Datos">
						 <p:ajax event="rowSelect" listener="#{proyeccionClientesMBean.onRowSelect}" update=":tabAvance, :tabAvance:idAvances" />
						<p:column headerText="Codigo" sortBy="#{cliente.codClienteLocal}">
							<h:outputText value="#{cliente.codClienteLocal}" />
						</p:column>
						<p:column headerText="Cliente" sortBy="#{cliente.razonSocial}">
							<h:outputText value="#{cliente.razonSocial}" />
						</p:column>
						<p:column headerText="RUC/DNI" sortBy="#{cliente.ruc}">
							<h:outputText value="#{cliente.ruc}" />
						</p:column>
						<p:column headerText="Avance Porcentaje"
							sortBy="#{cliente.porcentajeAvance}">
							<p:progressBar styleClass="#{cliente.colorBanda}"
								value="#{cliente.porcentajeAvance}" labelTemplate="{value}%"
								displayOnly="true" />
						</p:column>
						<p:column headerText="Avance Monto"
							sortBy="#{cliente.montoAvance}">
							<h:outputText
								value="#{cliente.montoAvance} / #{cliente.montoProyectado}" />
						</p:column>
					</p:dataTable>
				</h:form>
			</p:tab>
			<p:tab title="Avance Productos" id="tabProducto"
				titleStyleClass="titleTab" disabled="#{proyeccionClientesMBean.bloquear}">
				<ui:include src="avanceclienteproducto.xhtml" />
			</p:tab>
		</p:tabView>
	</ui:define>
</ui:composition>
</html>